/<!DOCTYPE html>
<link rel="shortcut icon" href="../resources/favicon.ico" th:href="@{/static/favicon.ico}">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pacient</title>
    <link rel="stylesheet" href="css/paticent.css">
    <script src="https://unpkg.com/axios/dist/axios.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>

<body>
    <div class="app">
        <div class="personalInfo">
            <header>
                <div class="portrait">
                    
                </div>
                <div class="greeting">
                    {{getGreeting()}}
                </div>
            </header>
            <div class="background"></div>
            <ul class="usrInfo" v-if="!isEditing">
                <li v-for="item in usrInfo" :key="item.id">
                    <div class="infoKey">{{item.key}}</div>
                    <div class="infoValue">{{item.value}}</div>
                </li>
            </ul>
            <ul class="editingInfo" v-if="isEditing">
                <li v-for="item in usrInfo" :key="item.id">
                    <div class="infoKey">{{item.key}}</div>
                    <input id='editingInfo' type='text' v-model="item.value">
                </li>
            </ul>
            <div class="tool">
                <span class="exit" title="退出登录"></span>
                <span class="edit" :title="editToolTitle" @click="changeEditingState" v-text="editTool"></span>
            </div>
        </div>

        <div class="main">
            <section class="healthReport">
                <header>今日健康上报 <span class="date"> {{date}}</span></header>
                <ul class="healthReportInfo">
                    <li v-for="item in healthReport" :key="item.id">
                        <span>{{item.key}}</span>
                        <input type="text" :class="{submitted:hasSubmitted}" v-model="item.value"
                            readonly="hasSubmitted">
                        <span>{{item.unit}}</span>
                    </li>
                </ul>
                <button class="submit" :class='{submitted:hasSubmitted}' @click="submitHealthReport"
                    :disabled="hasSubmitted" v-text="submitBtnText"></button>
            </section>
            <div class="below">
                <section class="notification">
                    <header>通知</header>
                </section>
                <section class="doctorList">
                    <header>我的医生</header>
                </section>
            </div>
        </div>
    </div>
    <script src="../js/patient.js"></script>
</body>

</html>